<template>
  <div>
    <div class="tl-form-line-title sub-title">
      <div class="toolbar">
        <el-button v-if="!showDisabled" type="text" size="medium" icon="el-icon-circle-plus-outline" @click="openEditDialog('editForm')">新增客户决策分析</el-button>
        <el-button v-if="showDisabled" type="text" size="medium" icon="el-icon-view" @click="openViewDialog('editForm')">查看客户决策分析</el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table :key="tableKey + 'mpmCustomerAnalysis'" class="tl-table" ref="mainTable" height="300px" v-loading="loading" :data="datas" @selection-change="doSelectChange" @sort-change="doSortChange" @row-dblclick="doRowDbClick" @row-click="doRowClick" border fit :row-class-name="doChangeRowClassName" :span-method="objectSpanMethod">
      <!-- <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column> -->
      <el-table-column prop="elindex" label="序号" width="55px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="taskname" label="任务名称" min-width="300px" sortable="custom" sort-by="taskname" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="post" label="部门职务" width="200px" sortable="custom" sort-by="post" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="dispcustomerlevel" label="客户关系等级" width="120px" sortable="custom" sort-by="customerlevel" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="dispcustomerapproval" label="任务支持程度" width="120px" sortable="custom" sort-by="customerapproval" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="dispneedsupport" label="是否需要系统部支持" width="200px" sortable="custom" sort-by="needsupport" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="improveplan" label="客户关系改善计划" width="300px" sortable="custom" sort-by="improveplan" align="left" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column v-if="!showDisabled" label="操作" width="80px" v-slot="scope" fixed="right">
        <el-button type="text" icon="el-icon-delete" @click="doDeleteCustomerTask(scope.row.id)">删除</el-button>
      </el-table-column>
    </el-table>
    <tl-edit ref="editForm" :parentId="parentId" @refresh="doRefresh()" :showDisabled="showDisabled"></tl-edit>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
import tlEdit from '../mpmCustomerTask/edit'
/** 子组件 */
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
export default {
  name: 'mpmCustomerAnalysis',
  mixins: [mixin_list],
  components: { tlEdit },
  data() {
    return {
      description: '项目策划-客户决策链分析-列表查询',
      urlPrefix: '/mpm/customerAnalysis/',
      url: {
        list: '/mpm/customerAnalysis/queryCustomerTaskList',
        removeCustomerTask: '/mpm/customerTask/removeCustomerTask'
        // queryCodeList: '/mpm/customerAnalysis/dataCodeList'
      },
      // 排序参数
      sorterInfo: {
        sidx: 'MPMCUSTOMERTASK.sortcode',
        sord: 'asc, MPMCUSTOMERANALYSIS.customerlevel asc'
      },
      // 分页参数
      pageInfo: {
        currentPage: 1,
        pageSize: 2000
      },
      spanArr: [],
      position: 0,
      tableKey: 0
    }
  },
  props: {
    parentId: {
      type: [Number, String],
      default: ''
    },
    showDisabled: {
      type: Boolean,
      default: false
    },
    planstate: {
      type: Number
    }
  },
  methods: {
    beforeLoadData() {
      if (!this.parentId) {
        return false
      }
      this.queryParam.qry_planid = this.parentId
      return true
    },
    afterLoadData() {
      this.rowspan()
      this.tableKey++
    },
    rowspan() {
      this.spanArr = []
      this.position = 0
      let elindex = 1
      this.datas.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
          this.position = 0
          this.$set(item, 'elindex', elindex)
          elindex += 1
        } else {
          if (this.datas[index].id === this.datas[index - 1].id) {
            this.spanArr[this.position] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.position = index
            this.$set(item, 'elindex', elindex)
            elindex += 1
          }
        }
      })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    // 删除任务及客户关系分析信息
    doDeleteCustomerTask(id) {
      this.$tap
        .confirm('确定删除任务吗？')
        .then((_) => {
          deleteAction(this.url.removeCustomerTask, { id: id }).then((res) => {
            if (res.success) {
              this.loadData()
              this.$tap.message('删除成功！', 'success')
            } else {
              this.$tap.alert(res.message, 'warning')
            }
          })
        })
        .catch((_) => {})
    }
  }
}
</script>

<style lang="scss" scoped>
/** 表格样式相关 */
.tl-table {
  /** “暂无数据”居中显示 */
  /deep/ .el-table__empty-block {
    justify-content: center;
    align-items: center;
    padding: 0;
  }
  /deep/ .el-table__empty-text {
    text-align: center;
  }
  // 控制边框
  /deep/ .gutter {
    display: none !important;
  }
}
</style>
